<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="left-box"
        ><img src="@/assets/images/left.png" alt=""
      /></el-aside>
      <el-container>
        <el-header class="header-box"
          ><img
            src="@/assets/images/header.png"
            alt=""
            style="width: 1690px; height: 63px"
        /></el-header>
        <el-main class="main-box">
          <el-card shadow="always" class="mt-1">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入商品订单号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="formInline.sn"
                  placeholder="请输入商品SN码"
                  clearable
                />
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入收货手机号"
                  clearable
                />
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入产品名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="">
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入下单用户名称"
                  clearable
                />
              </el-form-item>
              <el-form-item label="">
                <el-select
                  v-model="formInline.region"
                  placeholder="请选择审核人员"
                  clearable
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-select
                  v-model="formInline.region"
                  placeholder="请选择归还期数"
                  clearable
                >
                  <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-card>
          <div class="mt-4" style="position: relative">
            <img
              @click="showLeft"
              src="@/assets/images/SKQYF56HMQ6.png"
              v-if="showImg == 'SKQYF56HMQ6'"
            />
            <img
              @click="showLeft"
              src="@/assets/images/SCKGWG4QPYX.png"
              v-else-if="showImg == 'SCKGWG4QPYX'"
            />
            <img src="@/assets/images/contract-1.png" v-else />
            <!-- 覆盖在上面的 show.png（绝对定位 + z-index） -->
            <img
              @click="goInfo"
              v-if="showleft == true"
              src="@/assets/images/show.png"
              style="
                position: absolute;
                top: 103px;
                left: 0;
                width: 630px;
                height: 140px;
                z-index: 10; /* 确保在最上层 */
              "
              class="mt-4-show"
            />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router'

const router = useRouter()

const formInline = reactive({
  user: "",
  region: "",
  date: "",
  sn: "",
});

const showImg = ref("");

const showleft = ref(false);
const onSubmit = () => {
  showImg.value = formInline.sn;
};
const showLeft = () => {
  showleft.value = true;
};
const goInfo = () => {
  router.push({ path: "/info/" +  showImg.value});
};
</script>

<style>
.common-layout {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.left-box {
  width: 221px;
  height: 100vh;
  overflow: hidden;
}
.header-box {
  height: 63px;
  width: 1690px;
  margin: 0;
  padding: 0;
}
.main-box {
  margin: 0;
  padding: 0;
}
.mt-1 {
  margin: 10px 10px 10px 10px;
}
.mt-4 {
  width: 1690px;
  height: 739px;
}
.mt-4 img {
  width: 1690px;
}
.mt-4-show {
  margin-left: 1051px;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
